

<template>
<div class="personalCente">
  <navBar :title='title' :titleColor='titleColor' :backVisible='backVisible' :homePath='homePath' :visibleLeft='visibleLeft'></navBar>
  <div class="personalCenterTop">
    <div class="clearfix">
        <p class="fl userImg"><img :src="UserInfo.avatarUrl"></p>
        <div class="fl userinfor" v-if="isLogo">
            <p class="userinforName">蒂芙尼</p>
            <p class="userinforTel">15023531920</p>
        </div>
        <div class="fl userinforBtn" v-else>
            <button v-if="isAuthorization==2"  @click="login">登录</button>
            <button v-else open-type="getUserInfo" lang="zh_CN" @getuserinfo="gGetUserInfo">登录</button>
        </div>
        <p class="fr icon-set" @click="setUp"><img src="../../../../static/images/set.png"></p>
    </div>


    
  </div>
  <div class="personalNum clearfix">
      <div class="personalNumList fl">
          <p class="personalNumListNum">1200</p>
          <p class="personalNumLisTit">我的积分</p>
      </div>
     <div class="personalNumList fl">
          <p class="personalNumListNum">3</p>
          <p class="personalNumLisTit">关注航班</p>
      </div>
      <div class="personalNumList fl" @click="cardPackage">
          <p class="personalNumListNum">6</p>
          <p class="personalNumLisTit">卡券包</p>
      </div>
  </div>
  <div class="personalCenterList">
      <div class="clearfix personalCenterData">
        <p class="fl personalCenterDataLeft"><img class="fl" src="../../../../static/images/icon-kefu.png"> 在线客服</p>
        <p class="fr personalCenterDataRight">24小时在线服务<img class="fr" src="../../../../static/images/right.png"></p>
      </div>
      <div class="clearfix personalCenterData" @click="agreementDetails()">
        <p class="fl personalCenterDataLeft"><img class="fl" src="../../../../static/images/icon-dqxy.png">协议详情</p>
        <p class="fr personalCenterDataRight"><img src="../../../../static/images/right.png"></p>
      </div>
      <div class="clearfix personalCenterData">
        <p class="fl personalCenterDataLeft"><img class="fl" src="../../../../static/images/icon-yjjy.png">意见建议</p>
        <p class="fr personalCenterDataRight">期待您的宝贵意见<img class="fr" src="../../../../static/images/right.png"></p>
      </div>
      <div class="clearfix personalCenterData" @click="consumerDetails">
        <p class="fl personalCenterDataLeft"><img class="fl" src="../../../../static/images/icon-xfmx.png">消费明细</p>
        <p class="fr personalCenterDataRight"><img src="../../../../static/images/right.png"></p>
      </div>
  </div>
  

</div>
</template>

<script>
import navBar from "@/components/navBar/index"
export default {    
  components:{
    navBar
  },
  data(){
    return{
        title:'我的',
        // 标题颜色
        titleColor: {
          default: "#FFFFFF"
        },
        backVisible:true,
        homePath:true,
        visibleLeft:false,
        isAuthorization:'',
        UserInfo:'',
        isLogo:false
    }
  },
  onShow(){     
    this.isAuthorization=this.$store.state.isAuthorization
    if(this.$store.state.uat!=''&&this.$store.state.uat!=null&&this.$store.state.uat!=undefined){
      this.isLogo=true
        if(this.$store.state.wxUserInfo!=''&&this.$store.state.wxUserInfo!=null&&this.$store.state.wxUserInfo!=undefined){
            this.UserInfo=this.$store.state.wxUserInfo
        }else{
            this.UserInfo=this.$store.state.userInfo
        }
    }else{
       this.isLogo=false
        this.UserInfo=this.$store.state.wxUserInfo
    }
  },
  onLoad(){
  },
  methods: {
    //获取用户信息
    gGetUserInfo(e){
      // 查看是否授权
       var that=this
       console.log(e)
        wx.getSetting({
          success: function(res){
            if (res.authSetting['scope.userInfo']) {
              console.log("已授权")
              that.getUserInfo()
            }else{
              that.login()
              console.log("未授权")
            }
          }
        })
    },
    //获取用户信息
    getUserInfo(){
      var that=this
      wx.getUserInfo({
          success: function (res) { 
             console.log(res)
              that.$store.commit('getWxUserInfo',res.userInfo);
              that.login()
          }
      })
    },
    login(){
      wx.navigateTo({
        url:"/pages/login/index/main"
      })
    },
    //协议详情
    agreementDetails(){
       wx.navigateTo({
        url:"/pages/personalCenter/agreementDetails/main"
      })
    },
    //卡卷
    cardPackage(){
       wx.navigateTo({
        url:"/pages/personalCenter/cardPackage/main"
      })
    },
    //消费明细
     consumerDetails(){
       wx.navigateTo({
        url:"/pages/personalCenter/consumerDetails/main"
      })
    },
    //设置
    setUp(){
      wx.navigateTo({
        url:"/pages/personalCenter/setUp/main"
      })
    },
    //关注航班
    followFlights(){
       wx.navigateTo({
        url:"/pages/personalCenter/followFlights/main"
      })
    }
  }
}
</script>

<style scoped>
.personalCente{
  width: 100%;
  height: 100vh;
  background: #fff;
}
.personalCenterTop{
  width: 100%;
  padding: 20px 15px;
  box-sizing: border-box;
  background: #fff;
}
.userImg{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 12px;
}
.userImg img{
  width: 65px;
  height: 65px;
  border-radius: 50%;
}
.userinforBtn{
  padding: 15px 0;
}
.userinforBtn button{
  width:80px;
  height:35px;
  line-height: 35px;  
  background:rgba(204,170,126,1);
  border-radius:50px;
  font-size:16px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(255,255,255,1);
  text-align: center;
}

.icon-set{
  margin-top:22px;
}
.icon-set,.icon-set img{
  width:24px;
height:24px;
}

.userinfor{
padding-top: 5px;
}
.userinforName{
  font-size:24px;
  font-family:PingFangSC-Medium,PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  margin-bottom: 8px;
}
.userinforTel{
  font-size:15px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(204,203,202,1);
}
.personalNum{
  width: 100%;
  padding: 0px 15px 20px;
  box-sizing: border-box;
  margin-bottom: 17px;
}
.personalNumList{
  width: 33.3333%;
 text-align: center;
}
.personalNumListNum{
  text-align: center;
  width: 100%;
  font-size:18px;
font-family:DINPro-Medium,DINPro;
font-weight:500;
color:rgba(51,51,51,1);
margin-bottom: 5px;
}
.personalNumLisTit{
   text-align: center;
  width: 100%;
  font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
}
.personalCenterList{
  width: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  background: #fff;

}
.personalCenterData{
  width: 100%;
  padding: 15px 0px;
  /* border-bottom: 1px solid #EBEBEB; */
}
.personalCenterData:last-child{
  border-bottom: none;
}
.personalCenterDataLeft{
  font-size:15px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(51,51,51,1);
}
.personalCenterDataLeft img{
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.personalCenterDataRight{
  font-size:12px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
}
.personalCenterDataRight img{
  width: 20px;
  height: 20px;
  margin-left: 6px;
}
</style>
